<template>
	<div id="forum-content" v-if="load">
		<el-row>
			<!-- content -->
			<el-col :lg="{span:16}" class="content">
				<!-- 标题 -->
				<div class="title">{{this.mainContent['title']}}</div>
				<!-- 文章信息 -->
				<div class="forum-info">
					<div>{{this.mainContent['submitTime']}}</div>
					<div><i class="iconfont icon-icon-test"></i>{{this.mainContent['visitNum']}}</div>
					<div><i class="iconfont icon-qipao"></i>{{this.mainContent['recommendNum']}}</div>
					<div class="dele-forum" v-if="isOwner" @click="deleteForum">删除此楼</div>
				</div>
				<!-- 发帖内容 -->
				<div class="forum-content">
					<el-row>
						<!-- 头像 -->
						<el-col class="header-photo" :lg="{span:3}">
							<div class="block">
								<el-avatar :size="40" v-if="mainContent" :src="authorPhoto">
								</el-avatar>
							</div>
						</el-col>
						<!-- 发帖内容,与评论样式一样 -->
						<el-col :lg="{span:21}" class="comment">
							<div class="username">{{this.mainContent['userName']}}</div>
							<div class="comment-content" v-html="this.mainContent['content']"></div>
							<div class="comment-time">{{this.mainContent['submitTime']}}</div>
						</el-col>
					</el-row>
				</div>

				<!-- 观看评论区 -->
				<div class="comment-list">
					<!-- 一条评论 -->
					<div class="one-comment" v-for="floor in floorList">
						<el-row>
							<!-- 头像 -->
							<el-col class="header-photo" :lg="{span:3}">
								<div class="block">
									<el-avatar :size="40" :src="getCommitPhoto(floor.index)"></el-avatar>
								</div>
							</el-col>
							<!-- 评论 -->
							<el-col :lg="{span:21}" class="comment">
								<div class="username">{{floor['username']}}</div>
								<div class="comment-content">{{floor['content']}}</div>
								<div class="comment-time">{{floor['replyTime']}}</div>
								<div class="comment-dele" v-if="isFloorOwner(floor['username'])"
									@click="deleteFloor(floor)">删除楼层</div>
							</el-col>
						</el-row>
					</div>
				</div>
				<!-- 评论区 -->
				<div class="give-comment" ref="comment">
					<give-comment :receive-url="receiveUrl" :give-comment="giveComment" @send-success="sendSuccess">
					</give-comment>
				</div>
			</el-col>

			<!-- sidebar -->
			<el-col :lg="{span:6,offset:1}" :xs=0 :class="{'sidebar':active}" ref="sidebar">
				<recomment></recomment>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import GiveComment from '../../components/givecomment/GiveComment'
	import Recomment from '../../components/recomment/Recomment'
	export default {
		components: {
			Recomment,
			GiveComment
		},
		name: "forum-content",
		created() {
			if (window.localStorage.getItem('token') == '' || window.localStorage.getItem('token') == undefined)
				this.$router.replace('/');
			window.document.body.style.backgroundColor = 'rgb(199, 219, 241)';
			this.generateStaticData();
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll, true);
			this.load = true;
		},
		destroyed: function() {
			window.removeEventListener('scroll', this.handleScroll, true); //  离开页面清除（移除）滚轮滚动事件
		},
		beforeRouteLeave(to, from, next) {
			window.document.body.style.backgroundColor = '';
			next();
		},
		data() {
			return {
				myHeaderSrc: 'http://127.0.0.1:8080/img/header/' + window.localStorage['username'] + '.jpg',
				forumID: '',
				mainContent: {},
				floorList: [],
				receiveUrl: 'http://127.0.0.1:8080/forum/addfloor',
				giveComment: {
					'content': '',
					'username': '',
					'forumID|floorIndex': ''
				},
				load: false,
				active: true,
				floorIndex: '', //记录下一层的楼数
				isOwner: false
			}
		},
		methods: {
			forMateContent(content, basicUrl) {
				content = '<p>' + content;
				let reg = new RegExp('\n', 'g') //g代表全部
				content = content.replace(reg, '</p><p>');
				let imgList = content.match(/\/IMG (.*?) IMG\//g);
				// for(let i=0;imgList!=null&&i<imgList.length;i+=2){
				//     let contentInside = imgList[i];//文本内的
				//     let fileName = imgList[i+1];//文件名
				//     let requestUrl = 'http://127.0.0.1:8080/img/forum/'+basicUrl+'/'+fileName;//请求url
				//     let htmlImg = '<img src="'+requestUrl+'" >';
				//     content = content.replace(contentInside,htmlImg);
				// }
				for (let i = 0; imgList != null && i < imgList.length; i++) {
					let fileName = imgList[i].substr(5, imgList[i].length - 10);
					let requestUrl = 'http://127.0.0.1:8080/img/forum/' + basicUrl + '/' + fileName; //请求url
					let htmlImg = '<img src="' + requestUrl + '" >';
					content = content.replace(imgList[i], htmlImg);
				}
				return content;
			},
			requestForMessage() {
				this.clearAll();
				//请求所需数据
				let forumID = this.forumID = this.$route.query.forumID;
				//1.请求主贴内容
				this.request({
					url: '/forum/getcontent/' + forumID,
				}).then(res => {
					let content = res.data['content'];
					let basicUrl = res.data['basicUrl'];
					res.data['submitTime'] = res.data['submitTime'].substr(0, 19);
					content = this.forMateContent(content, basicUrl);
					res.data['content'] = content;
					this.mainContent = res.data;
					if (res.data['userName'] == window.localStorage['username']) {
						this.isOwner = true;
					}

				}).catch(err => {
					console.log(err);
				});
				//2.请求楼层内容
				this.request({
					url: '/forum/getfloor/' + forumID,
				}).then(res => {

					for (let i = 0; i < res.data.length; i++) {
						res.data[i]['replyTime'] = res.data[i]['replyTime'].substr(0, 19);
						this.floorList.push(res.data[i]);
						this.floorIndex = res.data[i]['floorIndex']; //获取最后一层的楼层
					}
					this.slotMessage = forumID + '|' + (++this.floorIndex);
				}).catch(err => {
					console.log(err);
				});
				// this.sleep(500).then(()=>{
				//     //code 添加三秒后执行的逻辑
				//     this.load = true;
				// })

			},
			generateStaticData() {
				this.clearAll();

				//1.生成主贴内容
				this.mainContent['title'] = '请问这四张图片如何区分？应该提取什么特征？';
				this.mainContent['submitTime'] = '2021-7-5 08:00';
				this.mainContent['visitNum'] = 128;
				this.mainContent['recommendNum'] = 5;
				this.mainContent['userName'] = 'Brandon';
				this.mainContent['content'] = "<img src='/img/admin.e6b75c37.jpg'/>";

				//2.生成楼层内容
				let usernames = ['Brandon', 'b2', 'b3', 'b4', 'b5'];
				let contents = [];
				let replyTimes = ['2021-7-5 08:01', '2021-7-5 08:35', '2021-7-5 18:55', '2021-7-6 18:05',
					'2021-7-7 06:49'
				];
				for (let i = 0; i < 5; i++) {
					let floor = {
						username: usernames[i],
						content: usernames[i] +
							'想用matlab区分这四张图片，分别是墙壁，树林，电线杆和电力线的雷达图。我现在想提取特征，然后输入到支持向量机中进行区分。之前计算了灰度共生矩阵，提取了四个纹理特征值。但效果不是很明显。因此想问问大佬们有没有其他方法可以提取别的特征? 谢谢大家啦!',
						replyTime: replyTimes[i]
					};
					this.floorList.push(floor);
				}
			},
			clearAll() {
				//清除所有请求数据
				//this.load = false;
				this.forumID = '';
				this.mainContent = {};
				this.floorList = [];
				// this.slotMessage = '';
				this.floorIndex = '';
				this.isOwner = false;
			},
			sendSuccess(giveComment) {
				let newMessage = {
					'replayTime': this.getTime(),
					'username': giveComment['username'],
					'content': giveComment['content']
				}
				this.floorList.push(newMessage);
			},
			// sleep(ms) {
			// 	return new Promise(resolve =>
			// 		setTimeout(resolve, ms)
			// 	)
			// },
			getTime() {
				let time =
					new Date().getFullYear() +
					"-" +
					(new Date().getMonth() + 1) +
					"-" +
					new Date().getDate() +
					" " +
					new Date().getHours() +
					":" +
					new Date().getMinutes();
				return time;
			},
			handleScroll() {
				let commentDistance = this.$refs['comment'].getBoundingClientRect().top;
				if (commentDistance < 500)
					this.active = false;
				else
					this.active = true;
			},
			isFloorOwner(username) {
				return username == window.localStorage['username'];
			},
			// deleteForum() {
			// 	//删除整楼
			// 	this.request({
			// 		url: 'http://localhost:8080/forum/deleteforum/' + this.forumID
			// 	}).then(res => {
			// 		this.$router.replace("/forum");
			// 	}).catch(err => {
			// 		console.log(err);
			// 	})
			// },
			deleteFloor(floor) {
				this.floorList.pop(floor);
			},
			getCommitPhoto(index) {
				// let commitPhotoList = ['../../assets/image/adminlogin.jpg', '../../assets/default.jpg',
				// 	'../../assets/default.jpg', '../../assets/default.jpg',
				// 	'../../assets/admin.jpg'
				// ];
				// return require(commitPhotoList[index]);
				if (index == 0) {
					return require('../../assets/image/adminlogin.jpg');
				} else if (index == 4) {
					return require('../../assets/default.jpg');
				} else {
					return require('../../assets/admin.jpg');
				}
			}
		},
		computed: {
			authorPhoto: function() {
				return require('../../assets/image/adminlogin.jpg');
			},
			commitPhoto: function() {
				return require('../../assets/default.jpg');
			}
		}
	}
</script>

<style scoped>
	#forum-content {
		width: 90%;
		margin-left: 10%;
		margin-top: 40px;
	}

	.content {
		height: 100%;
		background-color: white;
		padding: 20px;
		border-radius: 6px;
	}

	.sidebar {
		height: 100%;
	}

	.title {
		font-size: 28px;
		font-weight: 700;
	}

	.forum-info {
		display: flex;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.forum-info div {
		color: #9b9b9b;
		font-size: 12px;
	}

	.forum-info div:nth-child(1) {
		margin-left: 70px;
	}

	.forum-info div:nth-child(2) {
		margin-left: 18px;
		margin-right: 18px;
	}

	.comment {
		padding: 20px 0px;
		border-bottom: 1px solid #e5e9ef;
		padding-bottom: 14px;
		padding-top: 22px;
	}

	.username {
		color: #6d757a;
		font-size: 12px;
		font-weight: 600;
		margin-bottom: 3px;
	}

	.comment-content {
		padding: 2px 0px;
		font-size: 14px;
	}

	.comment-content>>>img {
		max-width: 70%;
	}

	.comment-time {
		height: 26px;
		color: #99a2aa;
		line-height: 26px;
		font-size: 12px;
	}

	.header-photo .block {
		margin-top: 22px;
		margin-left: 20px;
	}

	.one-comment {
		border-left: solid 1px #e5e9ef;
		border-right: solid 1px #e5e9ef;
		padding-right: 20px;
	}

	.forum-content {
		border-left: solid 1px #e5e9ef;
		border-right: solid 1px #e5e9ef;
		border-top: solid 1px #e5e9ef;
		padding-right: 10px;
		border-radius: 6px 6px 0px 0px;
	}

	.give-comment {
		border: solid 1px #e5e9ef;
		border-top: none;
		border-radius: 0px 0px 6px 6px;
		margin-bottom: 10px;
	}

	.sidebar {
		position: fixed;
		right: 47px;
		top: 95px;
		width: 22.5%;
	}

	.comment-dele {
		float: right;
		margin-top: -16px;
		font-size: 12px;
		margin-right: 10px;
		color: #99a2aa;
		cursor: pointer;
	}

	.dele-forum {
		margin-top: 1px;
		cursor: pointer;
		margin-left: 360px;
	}

	@media only screen and (max-width: 767px) {
		#forum-content {
			width: 95%;
			margin: 0 auto;
			margin-top: 15px;
		}

		.comment {
			padding: 20px 0px;
			border-bottom: 1px solid #e5e9ef;
			padding-bottom: 14px;
			padding-top: 5px;
		}

		.header-photo .block {
			margin-top: 5px;
			margin-left: 5px;
		}

		.forum-content {
			padding: 0 10px;
			border-radius: 6px 6px 0px 0px;
		}

		.one-comment {
			padding: 0 10px;
		}
	}
</style>
